<body> や <html> などラップできない領域のタグのスタイルを書く

createGlobalStyleを使います。これはタグテンプレートになっていて、 CSS を書いて実行するとGlobalStyle（名前はなんでもいい）をコンポーネントを返します。これはレンダリング時にタグテンプレートに渡した CSS を<head>領域に追加してくれます。

createGlobalStyleはstyled-componentsから取り込めます。

import {createGlobalStyle} from 'styled-components';

あとはstyled.divのあとのようにスタイルを書くだけです。コンポーネントの中(children)には何も入れてはいけません。

const GlobalStyle = createGlobalStyle`
  html,
  body {
    height: 100%;
  }
`;

() => (
  <>
    
    
      
    
  
);

純